<template>
	<view class="mine-container">
		<!-- 背景部分 -->
		<view class="mine-background">
			<image class="mine-background-image" src="../../static/images/mine/MineBackgroundDefault.jpg" mode="aspectFill" />
		</view>
		<!-- 主体部分 -->
		<view class="mine-subject" :class="{active : mineInfo.currentSex === 1}">
			<!-- 头像：左边是自己，右边的对象 -->
			<view class="mine-avatar">
				<!-- 自己头像 -->
				<view class="mine-avatar-left" v-if="mineInfo.currentUserAvatar">
					<image :src="mineInfo.currentUserAvatar" mode="aspectFill" />
				</view>
				<view class="mine-avatar-left" v-else>
					<view class="none-avatar">未登录</view>
				</view>
				<!-- 在一起天数 -->
				<view class="mine-avatar-middle" v-if="mineInfo.currentFereAvatar">
					<image v-if="timeType.type === '1'" src="../../static/images/mine/meeting.png" mode="aspectFill" />
					<image v-else-if="timeType.type === '2'" src="../../static/images/mine/love.png" mode="aspectFill" />
					<image v-else-if="timeType.type === '3'" src="../../static/images/mine/wedding.png" mode="aspectFill" />
					<text style="font-size: 46rpx;">{{timeType.time}}天</text>
				</view>
				<view class="mine-avatar-middle" v-else>
					<image src="../../static/images/mine/oneLove.png" mode="aspectFill" />
					<view v-if="messages.length > 0" @click="viewMessage">
						<uni-badge class="uni-badge-left-margin" :text="messages.length" size="normal" absolute="rightTop">
							<uni-icons type="email-filled" size="40" />
						</uni-badge>
					</view>
				</view>
				<!-- 对象头像 -->
				<view class="mine-avatar-right" v-if="mineInfo.currentFereAvatar">
					<image :src="mineInfo.currentFereAvatar" mode="aspectFill"/>
				</view>
				<view class="mine-avatar-right" v-else>
					
					<view class="none-avatar">还没有哦😂</view>
				</view>
			</view>
			<!-- 工资换算系统和硬币 -->
			<view class="wage-coin">
				<!-- 工资换算系统 -->
				<view class="wage-conversion" @click="wageConversion" @touchstart="onPressWage" @touchend="onReleaseWage" :class="{'active': isPressWage}">
					<image src="../../static/images/mine/WageConversion.png" mode="aspectFill"/>
					<text style="font-size: 32rpx;">工资换算</text>
				</view>
				<!-- 硬币 -->
				<view class="coin" @click="coinPurse" @touchstart="onPressCoin" @touchend="onReleaseCoin" :class="{'active': isPressCoin}">
					<image src="../../static/images/mine/coin.png" mode="aspectFill"/>
					<text style="font-size: 32rpx;">硬币包</text>
				</view>
			</view>
			<!-- 其他设置 -->
			<view class="other-set">
				<uni-grid class="other-set-grid" :column="4" :showBorder="false">
					<!-- 个人信息设置 -->
					<uni-grid-item class="other-set-uni-grid-tiem">
						<view class="other-set-uni-grid-item-item" @click="personalSet">
							<image src="../../static/images/mine/PersonalSet.png" mode="aspectFill"/>
							<text style="font-size: 26rpx;">个人信息</text>
						</view>
					</uni-grid-item>
					<!-- 情侣信息设置 -->
					<uni-grid-item class="other-set-uni-grid-tiem">
						<view class="other-set-uni-grid-item-item" @click="coupleSet(mineInfo.currentSex)">
							<image src="../../static/images/mine/CoupleSet.png" mode="aspectFill"/>
							<text style="font-size: 26rpx;">情侣信息</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import { ref, onMounted, onBeforeUnmount } from "vue";
	import { onHide, onShow } from '@dcloudio/uni-app';
	import { isLogin, getUserAndCoupleInfo } from "../../utils/apiMine";
	import { getDataFromStorage, setDataToStorage, calculateDaysDifference } from "../../utils/commonUtils";
	import { createWebSocket, onMessage, disconnectWebSocket } from "../../utils/websocket";
	//-----------------mine的信息展示---------------------------------
	const mineInfo = ref({
		currentAccount:null,
		backgroundPic:null,
		confirmLoveDay:null,
		currentFereAvatar:null,
		currentSex:null,
		currentUserAvatar:null,
		firstMeetDay:null,
		weddingDay:null
	})
	const getMineShowInfo = async () => {
		let res = await getUserAndCoupleInfo();
		mineInfo.value = res;
		// console.log(mineInfo.value);
		// console.log(mineInfo.value.currentSex === 0)
	};
	const timeType = ref({
		'type':null,
		'time':null
	});
	onShow( async () => {
		await getMineShowInfo();
		// console.log(messages.value)
		// console.log(mineInfo.value.currentSex);
		// console.log("1");
		if (messages.value.length > 0) {
			let res = await getDataFromStorage('bindCoupleMessage');
			console.log(res);
			if (res) {
				messages.value = res;
			}
			// console.log("12")
			// console.log(messages.value);
		}
		await getDataFromStorage('showTimeType').then((res) => {
			// console.log(res);
			timeType.value.type = res.type;
			timeType.value.time = calculateDaysDifference(res.time);
			// console.log(timeType.value);
		})
		
	})
	
	
	//-----------------工资换算系统和硬币点击变灰---------------------------------
	const isPressWage = ref(false)
	const isPressCoin = ref(false)
	
	const onPressWage = () => {
		isPressWage.value = true;
	};
	const onReleaseWage = () => {
		isPressWage.value = false;
	};
	
	const onPressCoin = () => {
		isPressCoin.value = true;
	};
	const onReleaseCoin = () => {
		isPressCoin.value = false;
	};
	//跳转到工资换算系统
	const wageConversion = () => {
		uni.navigateTo({
			url:'/pages/mine/wage_coin/wage-conversion'
		})
	};
	//跳转到硬币包
	const coinPurse = () => {
		uni.navigateTo({
			url:'/pages/mine/wage_coin/coin-purse'
		})
	}
	//-----------------viewMessage---------------------------------
	const viewMessage = () => {
		// console.log("查看消息");
		setDataToStorage('bindCoupleMessage', messages);
		uni.navigateTo({
			url:'/pages/mine/other_set/couple_set_item/couple-bind-message'
		})
	}
	//-----------------onMounted---------------------------------
	//用来存储消息
	const messages = ref([]);
	onMounted( async () => {
		await isLogin();
		const sid = await getDataFromStorage('userAccount');
		await createWebSocket(sid);
		onMessage((data) => {
			// console.log('接收到的数据:', data);
			// 在这里处理其他逻辑
			messages.value.push(data);
		});
		
		// console.log("1")
	});
	onBeforeUnmount(() => {
		disconnectWebSocket();
	})

	//-----------------其他设置----------------------------------------------------
	//-----------------个人信息---------------------------------
	const personalSet = () => {
		uni.navigateTo({
			url:'/pages/mine/other_set/personal-set'
		})
	}
	//-----------------情侣信息---------------------------------
	const coupleSet = (currentSex) => {
		// console.log(currentSex)
		uni.navigateTo({
			url:'/pages/mine/other_set/couple-set'
		})
	}
	
</script>

<style lang="scss" scoped>
	.mine-container{
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex-wrap: wrap;
		overflow: hidden;
		.mine-background{
			height: 300rpx;
			background-color: gray;
			.mine-background-image{
				width: 100%;
				height: 120%;
				z-index: 1;
				
			}
		}
		.mine-subject{
			z-index: 5;
			height: 80%;
			border-radius: 20rpx 20rpx 0 0;
			box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.2); /* 水平位移、垂直位移、模糊半径、颜色 */
			background:
				linear-gradient(to bottom, transparent, #fff 200rpx),
				linear-gradient(to right, #FFCCFF, #87CEEB);
			&.active{
				background:
					linear-gradient(to bottom, transparent, #fff 200rpx),
					linear-gradient(to right, #87CEEB, #FFCCFF);
			}
			.mine-avatar{
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding-top: 60rpx;
				.mine-avatar-left, .mine-avatar-right{
					// position: relative;
					width: 150rpx;
					height: 150rpx;
					// background-color: aqua;
					image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
						
					}
					.none-avatar{
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 26rpx;
						width: 100%;
						height: 100%;
						border-radius: 50%;
						background-color: #e5e5e5;
					}
					
				}
				.mine-avatar-middle{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 200rpx;
					height: 200rpx;
					// background-color: aqua;
					image{
						width: 45%;
						height: 45%;
						padding-bottom: 20rpx;
					}
				}
			}

			.wage-coin{
				width: 710rpx;
				height: 200rpx;
				margin: 20rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				background-color: rgba(135, 206, 235, 0.3);
				.wage-conversion, .coin{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					width: 250rpx;
					height: 160rpx;
					border-radius: 20rpx;
					// background-color: #87CEEB;
					image{
						width: 100rpx;
						height: 100rpx;
					}
				}
				.wage-conversion.active, .coin.active{
					background-color: #e4e4e4;
					color: #999;
				}
			}
			.other-set {
			    display: flex;                          // 使用 flexbox 来排列内容
			    width: 710rpx;                         // 设置宽度
			    height: 700rpx;                        // 设置高度
			    margin: 20rpx;                         // 外边距
			    border-radius: 20rpx;                  // 圆角边框
			    background: linear-gradient(to right, rgba(255, 204, 255, 0.3), #fff);
			
			    .other-set-grid {
			        width: 100%;                      // 确保网格布局占满父容器宽度
			    }
				.other-set-uni-grid-tiem{
					.other-set-uni-grid-item-item {
					    display: flex;                    // 使用 flexbox 来排列内容
					    flex-direction: column;           // 纵向排列
					    justify-content: center;          // 垂直居中对齐
					    align-items: center;              // 水平居中对齐
					    height: 100%;                  // 固定高度
					    image {
					        width: 45%;                  // 图像占满父容器
					        height: 45%;                 // 图像占满父容器
							padding-bottom: 20rpx;
					    }
					}
				}
			    
			}

		}
	}
</style>
